JavaScript常用脚本集锦5

DOM操作的增强版功能函数

/**
 * 将一个DOM节点、HTML字符串混合型参数
 * 转化为原生的DOM节点数组
 *
 * */
function checkElem(a) {
    var r = [];

    if (a.constructor != Array) {
        //如果不是参数数组,则强行转换
        a = [a];
    }

    for (var i = 0; i < a.length; i++) {
        //如果是字符串,例如"<li>aa</li>"
        if (a[i].constructor == String) {
            //使用一个临时元素来存放HTML
            var div = document.createElement("div");
            //注入HTML,转换成DOM结构
            div.innerHTML = a[i];

            for (var j = 0; j < div.childNodes.length; j++) {
                r[r.length] = div.childNodes[j];
            }

        } else if (a[i].length) {
            //假定是DOM节点数组
            for (var j = 0; j < a[i].length; j++) {
                r[r.length] = a[i][j];
            }
        } else {
            //DOM节点
            r[r.length] = a[i];
        }
    }

    return r;
}

/**
 * 在parent执行环境下,在before元素下前面添加elem元素
 * */
function before(parent, before, elem) {
    //检查是否提供parent节点参数
    if (elem == null) {
        elem = before;
        before = parent;
        parent = before.parentNode;
    }
    //获取元素的新数组
    var elems = checkElem(elem);

    /**
     * 向后遍历数组，
     * 因为我们向前插入元素
     * */
    for (var i = elems.length - 1; i >= 0; i--) {
        parent.insertBefore(elem[i], before);
    }

}
/**
 * 为parent追加一个子元素的辅助函数
 *
 * */
function append(parent, elem) {
    var elems  = checkElem(elem);

    for(var i = 0; i <= elems.length; i++){
        parent.appendChild(elems[i]);
    }
}
/**
 * 删除elem节点函数
 *
 * */
function remove(elem) {
    if(elem) {
        elem.parentNode.removeChild(elem);
    }
}
/**
 * 从一个元素中删除所有子节点的函数
 *
 * */
function empty(elem) {
    while(elem.firstChild) {
        remove(elem.firstChild);
    }
}

代码来源：https://gist.github.com/hehongwei44/31ce781d77ca33baea48

创建DOM元素的通用函数

/*创建DOM元素的通用函数*/
function create (elem) {
    return document.createElementNS ? document.createElementNS('http://' +
        'www.w3.org/1999/xhtml', elem) : document.createElement(elem);
}

//如果提供的是字符串,则把它转化成文本节点.
function checkElem(elem) {
    return elem && elem.constructor == "String" ? document.createTextNode(elem) : elem;
}

//在parent执行环境下,在before元素下前面添加elem元素
function before(parent, before, elem){
    /*
    * 如果不提供parent的情况下，则before接受parent参数，elem接受before的参数。
    * ps:该方法处理很独特，值得借鉴
    * */
    if(elem == null) {
        elem = before;
        before = parent;
        parent = before.parent;
    }

    parent.insertBefore(checkElem(elem),before);
}

//为parent追加一个子元素的辅助函数
function append(parent, elem){
    parent.appendChild(elem);
}

代码来源：https://gist.github.com/hehongwei44/b449b9081b00bc1dc6ac

检查元素是否有一个指定的特性

/*检查元素是否有一个指定的特性*/
function hasAttribute(elem, name) {
    // !!表达式快速的求bool值
    return !!elem.getAttribute(name);
}

代码来源：https://gist.github.com/hehongwei44/fb9789ef08a2ef9c7ec3

获取元素文本内容的通用函数

/*获取元素文本内容的通用函数*/
function text(e) {
    var str = "";
    //判断元素是否包含子元素
    e = e.childNodes || e;

    //遍历子元素，获取其文本内容
    for (var i = 0; i < e.length; i++) {
        //如果子元素下面还包含子元素，则递归执行
        str += e[i].nodeType != 1 ? (e[i].nodeValue) : text(e[i].childNodes);
    }

    return str;
}

代码来源：https://gist.github.com/hehongwei44/08429d872a5f19ca7d6b

简单的DOM的API封装

/*根据ID获取元素*/
var $id = function(id){
    return document.getElementById(id);
};

/*根据标签名获取元素，返回元素的节点伪数组*/
var $tag = function(tagName, parent){
    return (parent || document).getElementsByTagName(tagName);
};
 /*根据样式名获取元素，返回元素的节点数组。其中className是必填项目*/
var $class = function (className, tagName, parent) {

    //元素可能存在多个className,故匹配我们所需要的className
    var re = new RegExp('(^|\\s)' + className + '(\\s|$)'), node = [];

    if (arguments.length === 1) {
        //只传入className
        tagName = "*";
        parent = document;

    } else if (arguments.length === 2 && tagName.constructor === "String") {
        //传入ClassName和节点类型
        parent = document;

    } else if (arguments.length === 2 && tagName.constructor !== "String") {
        //传入ClassName和父亲节点
        tagName = "*"

    } else if (arguments.length === 3) {
        //传入ClassName和节点类型以及父亲节点
    }

    var nodebyTag = parent.getElementsByTagName(tagName);

    for (var i = 0; i < nodebyTag.length; i++) {

        if (re.test(nodebyTag[i].className)) {
            node.push(nodebyTag[i]);
        }
    }

    return node;

}

代码来源：https://gist.github.com/hehongwei44/d608126f5b3407220932

通过原型拓展来实现DOM的查找方法。

//查找相关元素的前一个兄弟元素的方法。
HTMLElement.prototype.prev = function () {
    var elem = this;
    do {
        elem = elem.previousSibling;
    } while (elem && elem.nodeType != 1);

    return elem;
};

//查找相关元素的下一个兄弟元素的方法。
HTMLElement.prototype.next = function () {
    var elem = this;

    do {
        elem = elem.nextSibling;
    } while (elem && elem.nodeType != 1);

    return elem;
};

//查找元素第一个子元素的方法。
HTMLElement.prototype.first = function () {
    var elem = this.firstChild;
    //文本节点
    if(elem && elem.nodeType != 1){
        do {
            elem = elem.nextSibling;
        } while (elem && elem.nodeType != 1);
    }

    return elem;
};

//查找元素的最后一个子元素的方法。
HTMLElement.prototype.last = function () {
    var elem = this.lastChild;

    do {
        elem = elem.previousSibling;
    } while (elem && elem.nodeType != 1);

    return elem;
};

//查找元素指定层级的父元素。
HTMLElement.prototype.parent = function (num){
    var elem = this;
    num = num || 1;
    for( var i = 0; i < num; i++)
        if(elem != null) elem = elem.parentNode;
    return elem;
};

代码来源：https://gist.github.com/hehongwei44/7614a218810410b31ff4

dom一些常用的操作方法介绍

//查找相关元素的前一个兄弟元素的方法。
function prev(elem) {
    do {
        elem = elem.previousSibling;
    } while (elem && elem.nodeType != 1);

    return elem;
}
//查找相关元素的下一个兄弟元素的方法。
function next(elem) {
    do {
        elem = elem.nextSibling;
    } while (elem && elem.nodeType != 1);

    return elem;
}
//查找元素第一个子元素的方法。
function first(elem) {
    elem = elem.firstChild;

    return (elem && elem.nodeType != 1) ? next(elem) : elem;
}
//查找元素的最后一个子元素的方法。
function last(elem) {
    elem = elem.lastChild;

    return (elem && elem.nodeType != 1) ? prev(elem) : elem;
}
//查找元素指定层级的父元素。
function parent(elem, num){
    num = num || 1;
    for( var i = 0; i < num; i++)
        if(elem != null) elem = elem.parentNode;
    return elem;
}

代码来源：https://gist.github.com/hehongwei44/11e82b38b00aa63b0876